<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>梅花易数</title>

</head>


<body>
<div>
数字1：<input id='shuzi1'></input>
数字2：<input id='shuzi2'></input>
<br>
<button onclick='suan()'>-------算-------</button>
</div>
<div id="id1"></div>

<div>
	<canvas width="300px" height="400px" id="gua"></canvas>
</div>

<div id="id2">

</div>

<script type="text/javascript">

	var shangguashuzi ;
	var xiaguashuzi ;
	var bengua;
	var dongyao;
	var hugua;
	var biangua;
	var baguashuzi =[
			"111",
			"011",
			"101",
			"001",
			"110",
			"010",
			"100",
			"000"
	]; 
	function suan(){
		var shuzi1 = document.getElementById("shuzi1").value;
		var shuzi2 = document.getElementById("shuzi2").value;
		huagua(shuzi1,shuzi2);
	}
	
	function jisuangua(shuzi1,shuzi2){
		shangguashuzi = shuzi1%8==0?8:shuzi1%8;
		xiaguashuzi = shuzi2%8==0?8:shuzi2%8;
		return baguashuzi[shangguashuzi-1] + baguashuzi[xiaguashuzi-1]
	}
	
	function huagua(shuzi1,shuzi2){
		
		var gua = document.getElementById('gua');
		var ctx = gua.getContext('2d');
		gua.height = gua.height;
		
		//本卦
		bengua = jisuangua(shuzi1,shuzi2);
		huizhi(ctx,bengua,10);

		//互卦
		hugua = bengua.substr(0,1)+bengua.substr(3,2)+bengua.substr(1,2)+bengua.substr(5,1);
		huizhi(ctx,hugua,90);
			

		//变卦
		dongyao = (parseInt(shuzi1) + parseInt(shuzi2) ) % 6;
		if(dongyao==0){
			dongyao=6
		}
		biangua = bengua;
		biangua = biangua.substr(0,6-dongyao) + (biangua.substr(0-dongyao,1)==1?0:1) + biangua.substr(7-dongyao,biangua.length)
		//alert('动爻：'+dongyao+'互卦:'+biangua)
		huizhi(ctx,biangua,170);
		
		guazi(ctx,bengua,hugua,biangua);
	}

	function huizhi(ctx,guashuzi,x){
		for(var i=1;i<7;i++){
			ctx.fillStyle = "rgb(0,0,0)";
			if(guashuzi.substring(i-1,i)==1){
				ctx.fillRect(x,(2*i-1)*10,50,10);
			}else{
				ctx.fillRect(x,(2*i-1)*10,20,10);
				ctx.fillRect(x+30,(2*i-1)*10,20,10);
			}
		}
	}
	
	function guazi(ctx,bengua,hugua,biangua){
		ctx.font="17px Arial";
		ctx.fillText("本卦",17,150);
		ctx.fillText("互卦",97,150);
		ctx.fillText("变卦",177,150);
		//alert(guamap.get(bengua)+guamap.get(hugua)+guamap.get(biangua))
		ctx.fillText(guamap.get(bengua),17,180);
		ctx.fillText(guamap.get(hugua),97,180);
		ctx.fillText(guamap.get(biangua),177,180);
	}

	var guamap = new Map();
	guamap.set('111111','乾为天');
	guamap.set('111011','天泽履');
	guamap.set('111101','天火同人');
	guamap.set('111001','天雷无妄');
	guamap.set('111110','天风姤');
	guamap.set('111010','天水讼');
	guamap.set('111100','天山遁');
	guamap.set('111000','天地否');
	guamap.set('011111','泽天夬');
	guamap.set('011011','兑为泽');
	guamap.set('011101','泽火革');
	guamap.set('011001','泽雷随');
	guamap.set('011110','泽风大过');
	guamap.set('011010','泽水困');
	guamap.set('011100','泽山咸');
	guamap.set('011000','泽地萃');
	guamap.set('101111','火山大有');
	guamap.set('101011','火泽睽');
	guamap.set('101101','离为火');
	guamap.set('101001','火雷噬嗑');
	guamap.set('101110','火风鼎');
	guamap.set('101010','火水未济');
	guamap.set('101100','火山旅');
	guamap.set('101000','火地晋');
	guamap.set('001111','雷天大壮');
	guamap.set('001011','雷泽归妹');
	guamap.set('001101','雷火丰');
	guamap.set('001001','震为雷');
	guamap.set('001110','雷风恒');
	guamap.set('001010','雷水解');
	guamap.set('001100','雷山小过');
	guamap.set('001000','雷地豫');
	guamap.set('110111','风天小蓄');
	guamap.set('110011','风泽中孚');
	guamap.set('110101','烽火人家');
	guamap.set('110001','风雷益');
	guamap.set('110110','巽为风');
	guamap.set('110010','风水涣');
	guamap.set('110100','风山渐');
	guamap.set('110000','风地观');
	guamap.set('010111','水天需');
	guamap.set('010011','水泽节');
	guamap.set('010101','水火既济');
	guamap.set('010001','水雷屯');
	guamap.set('010110','水封井');
	guamap.set('010010','坎为水');
	guamap.set('010100','水山蹇');
	guamap.set('010000','水地比');
	guamap.set('100111','山天大畜');
	guamap.set('100011','山泽损');
	guamap.set('100101','山火贲');
	guamap.set('100001','山雷颐');
	guamap.set('100110','山风蛊');
	guamap.set('100010','山水蒙');
	guamap.set('100100','艮为山');
	guamap.set('100000','山地剥');
	guamap.set('000111','地天泰');
	guamap.set('000011','地泽临');
	guamap.set('000101','地火明夷');
	guamap.set('000001','地雷复');
	guamap.set('000110','地风升');
	guamap.set('000010','地水师');
	guamap.set('000100','地山谦');
	guamap.set('000000','地为坤');
</script>
</body>


</html>